<template>
  <view class="flex-d-lc r-20 overflow-hidden apply-resume">
    <view class="flex-c w p-h36 apply-resume__hd">
      <text class="text-700-132">提示</text>
    </view>
    <view class="p-h36 w flex-1 flex-d-t apply-resume__bd">
			<view>
				<text class="text-400-128">确定要投递所选岗位</text>
			</view>
			<Checkbox v-model="checked">
				<text class="text-400-328">我已查看承诺书《承诺书协议》</text>
			</Checkbox>
    </view>
    <view class="p-h36 p-v32 w apply-resume__ft">
      <view class="cancel-btn" @click="handleCancel">
        <text>取消</text>
      </view>
      <view class="confirm-btn" @click="handleConfirm">
        <text>确认</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { defineEmits, ref } from 'vue'
	import Checkbox from '@/components/checkbox.vue'

  const emit = defineEmits<{
    (e: 'cancel'): void;
    (e: 'confirm'): void;
  }>()

  const checked = ref(false)

  const handleCancel = () => {
    emit('cancel')
  }

  const handleConfirm = () => {
    if (!checked.value) {
      uni.$u.toast('请同意承诺书')
      return
    }

    emit('confirm')
  }
</script>

<style lang="scss" scoped>
	.apply-resume {
		width: 620rpx;
		height: 529rpx;
		&__hd {
			height: 141rpx;
			background: linear-gradient( 180deg, #F0F4FF 0%, #FFFFFF 100%);
		}
		&__bd {
			height: 127rpx;
			justify-content: space-evenly;
			text-align: center;
		}
		&__ft {
			display: flex;
			justify-content: center;
			.cancel-btn,
			.confirm-btn {
				width: 136rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10rpx;
				font-size: 28rpx;
				font-weight: bold;
			}
			.cancel-btn {
				color: $text-color-3;
				background-color: $bg-color-4;
			}
			.confirm-btn {
				margin-left: 32rpx;
				color: $text-color-2;
				background-color: $bg-color-2;
			}
		}
	}
</style>
